<script setup lang="ts">
import { ref, reactive } from 'vue'
import { NForm, NFormItemGi, NInput, NSelect, NCard, NGrid, NSpace } from 'naive-ui'
import { ZoomReset as ResetIcon, Search as SearchIcon } from '@vicons/carbon'
import { useNaiveForm } from '@/hooks/common/form'

defineOptions({
  name: 'UserTableSearch'
})

interface Emits {
  (e: 'reset'): void
  (e: 'search'): void
}

const emit = defineEmits<Emits>()

const { formRef, validate, restoreValidation } = useNaiveForm()

type Model = {
  username: string
  gender: number
  nickname: string
  email: string
  phone: string
  status: number
}

const model = defineModel<Model>('model', { required: true })

const options = reactive({
  gender: [
    {
      label: '男',
      value: 1
    },
    {
      label: '女',
      value: 0
    }
  ],
  status: [
    {
      label: '启用',
      value: 1
    },
    {
      label: '禁用',
      value: 0
    }
  ]
})

const reset = async () => {
  await restoreValidation()
  emit('reset')
}

const search = async () => {
  await validate()
  emit('search')
}
</script>

<template>
  <n-card title="用户搜索" size="small">
    <n-form ref="formRef" :model="model" label-placement="left" :label-width="80">
      <n-grid responsive="screen" item-responsive>
        <n-form-item-gi span="24 s:12 m:6" label="用户名" path="username">
          <n-input v-model:value="model.username" placeholder="请输入用户名" />
        </n-form-item-gi>
        <n-form-item-gi span="24 s:12 m:6" label="性别" path="gender">
          <n-select
            v-model:value="model.gender"
            :options="options.gender"
            placeholder="请选择性别"
            :clearable="true"
          />
        </n-form-item-gi>
        <n-form-item-gi span="24 s:12 m:6" label="昵称" path="nickname">
          <n-input v-model:value="model.nickname" placeholder="请输入昵称" />
        </n-form-item-gi>
        <n-form-item-gi span="24 s:12 m:6" label="手机号" path="phone">
          <n-input v-model:value="model.phone" placeholder="请输入手机号" />
        </n-form-item-gi>
        <n-form-item-gi span="24 s:12 m:6" label="邮箱" path="email">
          <n-input v-model:value="model.email" placeholder="请输入邮箱" />
        </n-form-item-gi>
        <n-form-item-gi span="24 s:12 m:6" label="用户状态" path="status">
          <n-select
            v-model:value="model.status"
            :options="options.status"
            placeholder="请选择用户状态"
            :clearable="true"
          />
        </n-form-item-gi>
        <n-form-item-gi span="24 m:12">
          <n-space justify="end" style="width: 100%">
            <NButton @click="reset">
              <template #icon>
                <ResetIcon />
              </template>
              重置
            </NButton>
            <NButton type="primary" ghost @click="search">
              <template #icon>
                <SearchIcon />
              </template>
              搜索
            </NButton>
          </n-space>
        </n-form-item-gi>
      </n-grid>
    </n-form>
  </n-card>
</template>

<style scoped></style>
